<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useGetJcProductReportPage } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { multipleFileJsonObj } from '@fl/utils/fn'
import { ElCard } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import Show from './show.vue'

const visible = ref<boolean>(false)

const id = ref<null | string>(null)

const state = ref({
    reportName: '',
})

const initialState = cloneDeep({ ...state.value })

const columns = [
    {
        label: '报告名称',
        prop: 'reportName',
        renderField: (_, onChange) => {
            return h(ElInput, {
                onChange,
                onKeydown: (event: any) => {
                    if (event.key === 'Enter') {
                        event.preventDefault()
                    }
                },
            })
        },
        valueType: 'Input',
    },
]

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'id', title: '产品报告ID', width: 200 },
        { field: 'reportName', title: '产品报告名称', width: 200 },
        { field: 'enterpriseName', title: '所属公司' },
        { field: 'reportDetectingUnit', title: '检测单位' },
        { field: 'reportDetectionTime', title: '检测时间', width: 150 },
        { field: 'reportImage', slots: { default: 'reportImage' }, title: '检测报告', width: 150 },
        { field: 'createTime', title: '创建时间', width: 150 },
        { field: 'a13', slots: { default: 'operate' }, title: '操作', width: 150 },
    ],
    height: 500,
    showOverflow: false,
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const initialTablePage = cloneDeep({ ...tablePage.value })

const params = computed(() => {
    return {
        page: tablePage.value.currentPage,
        reportName: state.value.reportName,
        size: tablePage.value.pageSize,
    }
})

const { data, isLoading } = useGetJcProductReportPage(params)

function search(val: any) {
    state.value = {
        ...val,
    }
}
function reset() {
    state.value = initialState
    tablePage.value = initialTablePage
}

function showDetail(row: any) {
    id.value = row.id
    visible.value = true
}

function onPreviewPdf(url: string) {
    window.open(url, '_blank')
}

watchEffect(() => {
    if (data.value) {
        tablePage.value.total = data.value?.total ?? 0
    }
})
</script>

<template>
    <ElCard shadow="never">
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="reset"
        />

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="data?.records"
        >
            <template #reportImage="{ row }">
                <div v-if="multipleFileJsonObj(row.reportImage).length"
                     class="p-10 flex flex-col gap-4"
                >
                    <template v-for="(item, index) in multipleFileJsonObj(row.reportImage)"
                              :key="index"
                    >
                        <span v-if="item.url.endsWith('.pdf')"
                              class="text-#409EFF cursor-pointer"
                              @click="onPreviewPdf(item.url)"
                        >
                            {{ item.name }}
                        </span>

                        <el-image v-else
                                  style="width: 100%; height: 50px"
                                  :src="item.url"
                                  fit="cover"
                                  :preview-src-list="[item.url]"
                        />
                    </template>
                </div>
            </template>

            <template #operate="{ row }">
                <div class="text-#dA0004 flex gap-15 justify-center">
                    <span class="cursor-pointer"
                          @click="showDetail(row)"
                    >
                        查看
                    </span>
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <Show v-model:visible="visible"
          v-model:id="id"
    />
</template>
